$font-colorTop: #07a1e4;
$font-colorNav: #f8cc04;
$font-colorOne: #ffd200;
$font-colorTwo: #ea6b3d;
$font-colorThree: #53f2f8;
$backgring-color: #03214b;
$font-sizeSM: 14px;
$font-sizeS: 16px;
$font-sizeM: 18px;
$font-sizeL: 22px;
$font-sizeXL: 30px;

* { margin:0;padding:0;box-sizing:border-box;}
ul {  list-style: none; }
ul > li { display: inline; }

#system {
  width:100%;
  height:100%;
  min-width:1200px;
  min-height:600px;
  overflow:hidden;
  color: #fff;
  position:relative;
  font-family:"Microsoft Yahei", Arial, sans-serif;
  background:rgb(40, 30, 47) url("assets/tmp/img/bi/backgroundKF.png") 0 0 / 100% 100% no-repeat;
}

/* layout */
.margin-t {margin-top: 10px}
.margin-l { margin-left: 20px;}
.pt { padding-top: 15px; }
.logo {width: 228px;height: 72px;}
#content-header { position:relative; height:128px; overflow:hidden;}
.header-times {
  display: flex;
  color: #fff;
  font-size: $font-sizeL;
  text-align: center;
  position: absolute;
  right: 1%;
  margin-top: 5px;

  p {
    width: 26px;
    height: 32px;
    line-height: 32px;
    margin-left: 2px;
    background-color: $backgring-color;
  }
}
.header-icon { position:absolute; top:42px; font-size:$font-sizeL; display: flex}
.header-nav { width: 1634px; background: rgb(11, 36, 72); display: flex;}
.header-top {
  width: 180px;
  text-align: center;
  line-height: 44px;

  p {
    height: 46px;
    color: $font-colorTop;
    font-size: $font-sizeL;
    margin-bottom: 0;
  }
  b {
    font-weight: normal;
    height: 46px;
    font-size: $font-sizeXL;
  }
}
#content-box { position:absolute;top:140px;bottom:0px;left:20px;right:20px;}
#flexCon {
  height:97%;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}
.flex-row {
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
.flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:8px 10px 10px 0px;}
.flex-cell-l{-webkit-flex:2;-ms-flex:2;flex:2;}
.flex-cell-c {-webkit-flex:4.4;-ms-flex:4.4;flex:4.4; background: url("assets/tmp/img/bi/kfA.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-cl {-webkit-flex:1;-ms-flex:1;flex:1; background: url("assets/tmp/img/bi/kfright.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-b {-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-cell-bl {-webkit-flex:2.8;-ms-flex:2.8;flex:2.8; background: url("assets/tmp/img/bi/kfB.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-br {-webkit-flex:3;-ms-flex:3;flex:3; background: url("assets/tmp/img/bi/kfC.png") 0 0 / 100% 100% no-repeat;}

.chart-wrapper {position:relative;height:100%;}
.vertical { height: 100%; display: flex; flex-direction:column; justify-content: space-between }
.chart-table { position:relative; top: 0; left:2px; display: flex; min-height: 33%;}
.title-table {display: flex; flex-wrap: wrap; }

/* 客诉处理进度条 */
.box-pil {
  font-size: $font-sizeS;
  display: flex;

  .box-one {
    color: $font-colorTop;
    margin-top: 10px;
    width: 37%;
    span {
      margin-left: 27px;
    }
    .logo {
      width: 23px;
      height: 23px;
      vertical-align: text-bottom;
    }
    .box-step {
      margin: 15px 0 0 45px;
    }
  }
  .box-th {
    background: linear-gradient(to right, rgb(17, 52, 107), rgb(8, 18, 52));
    width:67%;
    margin: 5px 10px 10px 0px;

    .th-one {
      margin: 5px 3px 5px 15px;
      width: 97%;
      height: 48px;
    }

    .th-two {
      margin: 0 5px 0 15px;
      width: 97%;
      height: 20px;
      text-align: end;

      span {
        color: #a4a5a2;
      }
    }
  }
}
/* 返修鉴定 */
.bot-one {
  .bot-span {color: $font-colorThree;font-size: $font-sizeM;
    &:first-child {margin-left: 13px;}
    span {padding-right: 18px;}
  }
  .bot-vertical { display: flex;
    .vertical-box {width: 51%;}
    .bot-tit {color: $font-colorTop;font-size: $font-sizeS;margin-top: 8px;
      span {margin-left: 13px;}
      .logo {width: 17px;height: 17px;vertical-align: text-bottom;}
    }
    .stpes-box { margin-top: 10px }
    .bot-bottom {font-size: $font-sizeS;width: 78%;background: rgba(2, 21, 67, 1);border-radius: 2px;line-height: 34px;text-align: center;margin-left: 30px;margin-top: 10px;}
  }
}
.bot-two { height: 80%; display: flex; flex-direction:column; justify-content: space-between;font-size: $font-sizeS;
  .two-table {margin-top: 10px;margin-bottom: 12px;
    tr {text-align: center;}
    tbody > tr > td {padding-top: 6px;}
    .th {width: 90px;color: $font-colorTop;}
    .td {width: 120px;color: $font-colorThree;text-align: end;}
  }
}

.main-copy {text-align: center; font-size:$font-sizeSM; color: $font-colorOne }




/* 1920/1080/1600 分辨率的显示器 */
@media (max-width:1900px) {
  .margin-l { margin-left: 15px;}
  .margin-t { margin-top: 5px;}
  .margin-lc { margin-left: 15px;}
  #content-header { height:123px;}
  .header-times {
    font-size: $font-sizeM;
    p { width: 22px;height: 26px;line-height: 26px; }
  }
  .header-icon {top: 35px}
  .header-nav { width: 1263px;}
  .header-top {
    width: 140px;
    line-height: 40px;

    p {
      height: 44px;
      font-size: 20px;
    }
    b {
      height: 44px;
      font-size: 26px;
    }
  }
  #content-box {top:125px;}
  .main-copy {font-size: 12px;}
  .box-pil { font-size: $font-sizeSM;
    .box-one { margin-top: 0px;
      span { margin-left: 18px;}
      .logo {width: 16px; height: 16px;}
      .box-step {margin: 5px 0 0 38px;}
    }
    .box-th { margin: 5px 8px 8px 0px; width: 62%;
      .th-one { height: 20px;  -webkit-line-clamp: 1 !important;}
      .th-two {height: 18px;}
    }
  }
  .bot-one {
    .bot-span {font-size: $font-sizeS;}
    .bot-vertical {
      .bot-tit {font-size: $font-sizeSM;}
      .stpes-box { margin-top: 5px }
      .bot-bottom {font-size: $font-sizeSM;width: 78%;line-height: 28px;margin-top: 5px;}
    }
  }
  .bot-two { font-size: $font-sizeSM;
    .two-table {margin-top: 6px;margin-bottom: 8px;
      tbody > tr > td {padding-top: 4px;}
      .th {width: 72px;}
      .td {width: 90px;}
    }
  }
}

/*  1440 分辨率的显示器 */
@media screen and (min-width:1400px) and (max-width:1500px) {
  .vertical { height: 100%;}
  .header-nav { width: 1168px;}
  .title-table {min-height: 34%;}
}

/*  1680 分辨率的显示器 */
//@media screen and (min-width:1300px) and (max-width:1400px) {
//  .header-nav { width: 1070px;}
//  .header-top {width: 120px; p{font-size: 19px;} b{font-size: 24px;}}
//}
